<template>
  <el-container class="logManagment_jobSearching-setting">
    <el-main>
      <div class="card-list">
        <el-card shadow="never" class="selectCard searchColumn">
          <el-form label-position="right" label-width="6rem">
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item label="所属端：">
                  <el-select>
                    <el-option label="全部" :value="0" />
                    <el-option label="会员端" :value="1" />
                    <el-option label="客户台" :value="2" />
                    <el-option label="商户端" :value="3" />
                    <el-option label="商管端" :value="4" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="任务状态：">
                  <el-select>
                    <el-option label="全部" :value="0" />
                    <el-option label="未启动" :value="1" />
                    <el-option label="执行中" :value="2" />
                    <el-option label="已终止" :value="3" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <SearchButton />
          </el-form>
        </el-card>
        <el-card shadow="never" class="tableCard">
          <vxe-table
            ref="xTable"
            border
            resizable
            show-overflow
            highlight-hover-row
            :loading="loading"
            :auto-resize="true"
            :data="tableData"
            width
            max-height="500"
            :print-config="{}"
            header-align="center"
          >
            <vxe-table-column type="seq" width="50" title=" " />
            <vxe-table-column field="person" min-width="120" title="任务名称" />
            <vxe-table-column field="module" width="100" align="center" title="所属端" />
            <vxe-table-column field="function" width="100" align="center" title="业务模块" />
            <vxe-table-column field="oper_time" min-width="150" title="任务描述" />
            <vxe-table-column field="ip_address" width="100" align="center" title="任务状态" />
            <vxe-table-column field="oper_activity" min-width="40" align="center" title="创建日期" />
            <vxe-table-column
              title="操作"
              fixed="right"
              align="center"
              width="140"
              slots="default"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id)"
                >查看</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="goJobLogMonitor(scope.row.id)"
                >调度日志</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="tableCurrentPage"
            :page-size.sync="pageSize"
            :total="total"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total',
            ]"
          />
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
export default {
  components: {
    SearchButton
  },
  data() {
    return {
      title: '蜂网电子商务',
      params: {
        name: ''
      },
      tableData: [
        {
          person: '定时清理过期活动',
          module: '商管端',
          function: '营销服务',
          oper_time: '定时清理过期活动',
          ip_address: '执行中',
          oper_activity: '2021-12-24 12:20',
          id: 1
        },
        {
          person: '定时清理过期活动',
          module: '商管端',
          function: '营销服务',
          oper_time: '定时清理过期活动',
          ip_address: '执行中',
          oper_activity: '2021-12-24 12:20',
          id: 1
        },
        {
          person: '定时清理过期活动',
          module: '商管端',
          function: '营销服务',
          oper_time: '定时清理过期活动',
          ip_address: '执行中',
          oper_activity: '2021-12-24 12:20',
          id: 1
        },
        {
          person: '定时清理过期活动',
          module: '商管端',
          function: '营销服务',
          oper_time: '定时清理过期活动',
          ip_address: '执行中',
          oper_activity: '2021-12-24 12:20',
          id: 1
        },
        {
          person: '定时清理过期活动',
          module: '商管端',
          function: '营销服务',
          oper_time: '定时清理过期活动',
          ip_address: '执行中',
          oper_activity: '2021-12-24 12:20',
          id: 1
        }
      ],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      selectId: '',
      loading: false,
      nowUserId: ''
    }
  },
  mounted() {
  },
  methods: {
    goJobLogMonitor(id) {
      this.$router.push(`/logManagement/jobLogMonitor?id=${id}`)
    }
  }
}
</script>

<style lang="scss">
.logManagment_jobSearching-setting {
  .card-list {
    width: 100%;
  }
  .headerIcon {
    width: 40px;
    height: 40px;
  }
}
</style>
